<template>
  <div v-if="filminfo">
    <!-- my-title组件  -->
    <m-title v-title="40" @back="handleBack">
      {{filminfo.name}}
    </m-title>

    <img class="banner" :src="filminfo.poster" >
    <div class="nowlist">
      <!-- 上 -->
      <div class="top">
        <div class="title">
          <div>{{filminfo.name}}</div>
          <div class="grade">{{filminfo.grade}}</div>
        </div>
        <p>{{filminfo.category}}</p>
        <p>{{filminfo.premiereAt | premtime}}上映</p>
        <p>{{filminfo.nation}}</p>
        <p class="synopsis" :class="flage?'syn':''">{{filminfo.synopsis}}</p>
        <p class="down" @click="flage = !flage">v</p>
      </div>

      <!-- 中 -->
      <div class="center">
        <p>演职人员</p>
        <swiper
          :gigodata="{
            slidesPerView: 3,
            spaceBetween: 10,
            freeMode: true
          }"
          gigoclass="gigoactive">
           <div class="swiper-slide one" v-for="(data,index) in filminfo.actors"
          :key="index">
            <img :src="data.avatarAddress"/>
            <div class="namerole">
              <p>{{data.name}}</p>
              <p class="p">{{data.role}}</p>
            </div>

          </div>
        </swiper>
      </div>

     <!-- 下 -->
      <div class="buttom">
        <div class="all">
          <div>剧照</div>
          <p @click="isPhotoShow=true">全部({{filminfo.photos.length}})</p>
        </div>
        <swiper
          :gigodata="{
            slidesPerView: 2,
            spaceBetween: 30,
            freeMode: true
          }"
          gigoclass="gigophoto">
          <div class="swiper-slide one" v-for="(data,index) in filminfo.photos"
          :key="data" @click="handlePreview(index)">
            <img :src="data"/>
          </div>
        </swiper>
      </div>

    </div>

    <photo v-show="isPhotoShow" :list="filminfo.photos"
    @event="handlePreview($event)">
      <m-title @back="handlePhotoShow">
        剧照 ( {{filminfo.photos.length}} )
      </m-title>
    </photo>

  </div>
</template>

<script>
import http from '@/util/http'
import swiper from '@/components/Swiper'
import moment from 'moment'
import Vue from 'vue'
import title from '@/components/Title'
import photo from '@/views/photo'
import { ImagePreview, Dialog } from 'vant'
Vue.use(ImagePreview).use(Dialog)
Vue.component('m-title', title) // 全局的组件
Vue.filter('premtime', function (val) {
  return moment(val * 1000).format('YYYY-MM-DD')
})
Vue.directive('title', {
  inserted (el, bind) {
    // 插入到dom之后的钩子函数
    // console.log(bind.value)
    el.style.display = 'none'
    window.onscroll = () => {
      // console.log(document.documentElement.scrollTop)
      if ((document.documentElement.scrollTop || document.body.scrollTop) > bind.value) {
        // 显示
        el.style.display = 'block'
      } else {
        // 隐藏
        el.style.display = 'none'
      }
    }
  },
  unbind () {
    // 指令的解绑的生命周期 钩子函数
    window.onscroll = null
  }
})
export default {
  data () {
    return {
      filminfo: null,
      flage: true,
      isPhotoShow: false
    }
  },
  components: {
    swiper,
    photo
  },
  methods: {
    handleBack () {
      // this.$router.push("/det")
      this.$router.back() // 返回功能
    },
    handlePhotoShow () {
      this.isPhotoShow = false
    },
    handlePreview (index) {
      ImagePreview({
        images: this.filminfo.photos,
        startPosition: index, // 从0
        closeable: true,
        closeIconPosition: 'top-left',
        onClose () {
          // do something
        }
      })
    }
  },
  beforeMount () {
    Dialog.confirm({
      title: '该影片没有排期',
      message: '请看其他上映的影片',
      confirmButtonText: '同意',
      cancelButtonText: '拒绝'
    }).then(() => {
      // on confirm
      this.$router.back()
    }).catch(() => {
      // on cancel
    })
  },
  mounted () {
    // this.$router //路由对象
    // this.$route 当前唯一匹配的路由对象
    console.log(this.$route.params.id, '利用id请求接口数据')
    http.request({
      url: `gateway?filmId=${this.$route.params.id}&k=4955584`,
      headers: {
        'X-Host': 'mall.film-ticket.film.info'
      }
    }).then(res => {
      this.filminfo = res.data.data.film
    })
  }
}
</script>

<style lang="scss">
  .banner{
    width: 100%;
  }
  .nowlist{
     background-color: #F4F4F4;
    .top{
      background-color: #fff;
      padding-left: 10px;
      padding-right: 10px;
      p{
        margin-top: 6px;
        font-size: 14px;
        color: #999;
      }
      .title{
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
         .grade{
            color:orange;
          }
      }
      .synopsis{
        margin-top:15px;
      }
      .syn{
        height: 60px;
        overflow: hidden;
      }
      .down{
        text-align: center;
      }
    }
    .center{
      margin-top: 10px;
      padding-left: 10px;
      background-color: #fff;
      .namerole{
        text-align: center;
        font-size: 12px;
        .p{
          color: #999;
          margin-top: -12px;
        }
      }
      p{
        margin-bottom: 10px;
        padding-top: 10px;
      }
    }
    .buttom{
      margin-top: 10px;
      padding-left: 10px;
      margin-bottom: 30px;
      padding-right: 10px;
      background-color: #fff;
      .all{
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        padding-top: 10px;
        p{
          color: #999;
        }
      }
    }
    .buy{
      position: fixed;
      left: 0;
      bottom: 0;
      z-index: 100;
      width: 100%;
      height: 50px;
      background-color: #FF5F16;
      color: #fff;
      text-align: center;
      font-size: 18px;
      line-height: 50px;
    }
  }
  .one{
    text-align: center;
    img{
      height: 100px;
    }
  }
</style>
